import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/utils/source_utils.dart';

class BarrageOne extends StatefulWidget {
  final String? avatar;
  final String name;
  final String operation;
  final String result;
  final Color? bgColor;

  BarrageOne({
    this.avatar,
    required this.name,
    required this.operation,
    required this.result,
    this.bgColor,
  });

  @override
  _BarrageOneState createState() => _BarrageOneState();
}

class _BarrageOneState extends State<BarrageOne> {
  final double _height = 30;
  final double _space = 4;
  final BoxBorder _border = Border.all(
    width: 1,
    color: Color.fromRGBO(55, 57, 69, 1),
    style: BorderStyle.solid,
  );
  final BorderRadius _borderRadius = BorderRadius.circular(30);

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: TextStyle(
        color: Colors.black,
        fontSize: 14,
        height: 1,
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          // 背景
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              height: _height,
              margin: EdgeInsets.only(top: _space, left: _space),
              decoration: BoxDecoration(
                color: widget.bgColor ?? Color.fromRGBO(215, 233, 243, 1),
                border: _border,
                borderRadius: _borderRadius,
              ),
            ),
          ),
          // 内容
          Container(
            height: _height,
            padding: EdgeInsets.only(left: 40, right: 20),
            margin: EdgeInsets.only(bottom: _space, right: _space),
            decoration: BoxDecoration(
              color: Colors.white,
              border: _border,
              borderRadius: _borderRadius,
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 名称
                Container(
                  constraints: BoxConstraints(
                    maxWidth: 80,
                  ),
                  child: Text(
                    widget.name,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                SizedBox(width: 5),
                // 操作
                Text(widget.operation),
                SizedBox(width: 5),
                // 结果
                Container(
                  constraints: BoxConstraints(
                    maxWidth: 80,
                  ),
                  child: Text(
                    widget.result,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Color.fromRGBO(215, 83, 97, 1),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // 头像
          Positioned(
            left: -2,
            top: -1,
            bottom: -1,
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1.5,
                  color: widget.bgColor ?? Colors.white,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(_height + _space * 2 + 3),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(_height + _space * 2),
                child: widget.avatar != null
                    ? ExtendedImage.network(
                        widget.avatar!,
                        width: _height + _space * 2,
                        height: _height + _space * 2,
                        fit: BoxFit.cover,
                      )
                    : Image.asset(
                        ImageUtils.wrapAssets('coin-icon.png'),
                        width: _height + _space * 2,
                        height: _height + _space * 2,
                        fit: BoxFit.cover,
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
